<template>
    <div class="homeMain">
      <el-row style="margin: 20px 0">
        <el-col :span="5">
          <span class="demonstration" style="margin-right: 20px">游戏</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="demonstration" style="margin-right: 20px">日期</span>
          <el-date-picker v-model="date" type="date" :value-format="valueFormat" placeholder="选择日期"> </el-date-picker>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple-light">
            <span class="demonstration" style="margin-right: 20px">OpenID</span>
            <el-input style="width: 80%" size="medium" v-model="input" placeholder="请输入openid"></el-input>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple-light" style="padding-right: 20px">
            <el-button type="primary" @click="sousuo">搜索</el-button>
            <el-button type="danger" @click="logOut">退出</el-button>
          </div></el-col
        >
      </el-row>
  
      <el-row style="margin: 20px 0">
        <el-col :span="8" style="font-size: 24px; font-weight: 700"> ecpm: {{ ecpm }} </el-col>
        <el-col :span="8" style="font-size: 24px; font-weight: 700"> 曝光PV： {{ total }} </el-col>
        <el-col :span="8" style="font-size: 24px; font-weight: 700"> 总收入： {{ totalCost }} </el-col>
      </el-row>
  
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="event_time" label="日期" width="280"> </el-table-column>
        <el-table-column prop="cost" label="广告价值" width="180"> </el-table-column>
        <el-table-column prop="open_id" label="OpenId"> </el-table-column>
      </el-table>
      <!-- @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-size="pageSize"
          sizes, prev, pager, next, jumper
         -->
      <el-pagination :page-sizes="[500]" :current-page="currentPage" @current-change="handleCurrentChange" layout="total,sizes, prev, pager, next, jumper" :total="total" />
    </div>
  </template>
     
     <script>
  import axios from 'axios'
  export default {
    name: 'App',
    data() {
      return {
        options: [
          {
            value: '1',
            label: '',
          },
        ],
        currentPage: 1, // 当前页码
        value: '1',
        input: '',
        date: '',
        valueFormat: 'yyyy-MM-dd',
        tableData: [],
        total: 0,
        ecpm: '',
        totalCost: '',
        uuid: '',
      }
    },
    created() {
      const now = new Date()
      let currentYear = now.getFullYear()
      let currentMonth1 = now.getMonth() + 1 // 注意月份从 0 开始，所以要加 1
      let currentMonth = currentMonth1.toString().padStart(2, '0')
      let currentDay = now.getDate()
      this.date = `${currentYear}-${currentMonth}-${currentDay}`
    },
    mounted(e) {
      this.uuid = window.sessionStorage.getItem('token')
      this.options[0].label = window.sessionStorage.getItem('name')
      this.fetchData()
      console.log(e)
    },
    methods: {
      //退出登录
      logOut() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.cost <= 1) {
          return 'success-01'
        } else if (row.cost > 1 && row.cost <= 5) {
          return 'success-15'
        } else if (row.cost > 5 && row.cost <= 10) {
          return 'success-510'
        } else if (row.cost > 10 && row.cost <= 15) {
          return 'success-1015'
        } else if (row.cost > 15 && row.cost <= 20) {
          return 'success-1520'
        } else if (row.cost > 20) {
          return 'success-2030'
        }
        // if (rowIndex === 1) {
  
        // } else if (rowIndex === 3) {
        //   return 'success-row';
        // }
        return ''
      },
      fetchData() {
        console.log(this.uuid)
        this.$http
          .post('index/ecpmDataList', {
            date: this.date,
            open_id: '',
            uuid: this.uuid,
            page_size: 500,
          })
          .then((res) => {
            console.log(res)
            this.total = res.data.data.count
            this.tableData = res.data.data.list
            this.ecpm = res.data.data.ecpm
            this.totalCost = res.data.data.totalCost
          })
      },
      //手动查询数据
      sousuo() {
        this.$http
          .get('index/ecpmDataList', {
            params: {
              date: this.date,
              open_id: this.input,
              uuid: this.uuid,
              page_size: 500,
              page: this.currentPage,
            },
          })
          .then((response) => {
            this.total = response.data.data.count
            this.tableData = response.data.data.list
            this.ecpm = response.data.data.ecpm
            this.totalCost = response.data.data.totalCost
          })
          .catch((error) => {
            console.error('Error fetching data:', error)
          })
      },
      //切换页码触发事件
      handleCurrentChange(e) {
        console.log(e)
        this.currentPage = e
        this.sousuo()
      },
    },
  }
  </script>
     
  <style>
  .homeMain {
    margin: 0 20px;
    min-width: 1400px;
  }
  .el-table .warning-01 {
    background: #c0c4cc;
  }
  
  .el-table .success-15 {
    background: #e4e7ed;
  }
  .el-table .success-510 {
    background: #f56c6c;
  }
  .el-table .success-1015 {
    background: #eb681c;
  }
  .el-table .success-1520 {
    background: #e2a851;
  }
  .el-table .success-2030 {
    background: #67c23a;
  }
  </style>
     